@import '../../common/DesignerStyle.less';

.comp-list {

  .list-search {
    padding: 5px 5px 10px 5px;

    input {
      background-color: #363636;
      transition: background-color 0.5s;
    }

    input:hover {
      background-color: #2a2a2a;
      transition-duration: 0.3s;
    }

    input::placeholder {
      color: #818181;
      transition-duration: 0.3s;
    }
  }

  .list-items {
    padding: 0 5px;
    overflow-y: auto;
    height: calc(100% - 90px);


    .list-item {
      width: 100%;
      height: 140px;
      cursor: pointer;
      margin-bottom: 10px;
      background-color: #363636;

      .item-header {
        height: 25px;
        line-height: 25px;
        background-color: #363636;
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
        color: #8d8d8d;
        font-size: 10px;

      }

      .item-content {
        box-sizing: content-box;
        padding: 5px 10px 10px 10px;

        img {
          width: 160px;
          height: 100px;
        }
      }
    }
  }
}


@keyframes lcFadeInUp1 {
  0% {
    z-index: 1;
    opacity: 0;
    transform: translateX(20px);
  }
  50% {
    z-index: 1;
    opacity: 1;
    transform: translateX(20px);
  }
  55% {
    z-index: 1;
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    z-index: 1;
    opacity: 1;
    transform: translateX(0);
  }

}